<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Web Component</title>
	<style type="text/css">
	user-card{ font-size: 24px; color: red;}
	</style>
</head>
<body>
<user-card>
	<span slot="element-name1">slot1</span>
	<span slot="element-name2">slot2</span>
</user-card>
<user-card>
	<span slot="element-name1">slot11</span>
	<span slot="element-name2">slot22</span>
</user-card>

<template id="userCardTemplate">
	<div class="username username1">11</div>
	<slot name="element-name1">NEED NAME1</slot>
	<slot name="element-name2">NEED NAME2</slot>
	<div class="username username3">22</div>
</template>
<script type="text/javascript">
class UserCard extends HTMLElement {
	constructor() {
		super();
		const template = document.getElementById('userCardTemplate').content;
      	const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
	}
}  
window.customElements.define('user-card', UserCard); 
</script>
</body>
</html>